<template>
    <div class="mydiv1">
<el-row type="flex" justify="center" class="myTSrow" v-if="axiosOK">
  <el-col :span="6" 
  :offset="0" class="myTScol" >
    <el-card :body-style="{ padding: '0px' }">
      <div @mouseover="colmouseoverfirst" @mouseleave="colmouseleavefirst"
      @click="gobuyfirst">
      <img :src="listpicture[0]" class="image">
      <div style="padding: 14px;">
        <div class="mytitlediv">
          <span>{{topsellinglist[0].title}}</span>
        </div>
        <div>
          <span class="mypriceshow">仅售{{topsellinglist[0].price}}￥</span>
        </div>
        <div class="myowndiv"></div>
        <div>
          <span class="mybuyshow" :style="mybuyshowchange0">立即抢购</span>
        </div>
        <div class="myowndiv2"></div>
      </div>
      </div>
    </el-card>
  </el-col>
    <el-col :span="6" 
  :offset="1" class="myTScol" >
    <el-card :body-style="{ padding: '0px' }">
      <div @mouseover="colmouseoversecond" @mouseleave="colmouseleavesecond"
      @click="gobuysecond">
      <img :src="listpicture[1]" class="image">
      <div style="padding: 14px;">
        <div class="mytitlediv">
          <span>{{topsellinglist[1].title}}</span>
        </div>
        <div>
          <span class="mypriceshow">仅售{{topsellinglist[1].price}}￥</span>
        </div>
        <div class="myowndiv"></div>
        <div>
          <span class="mybuyshow" :style="mybuyshowchange1">立即抢购</span>
        </div>
        <div class="myowndiv2"></div>
      </div>
      </div>
    </el-card>
  </el-col>
    <el-col :span="6"  
  :offset="1" class="myTScol" >
    <el-card :body-style="{ padding: '0px' }">
      <div @mouseover="colmouseoverthird" @mouseleave="colmouseleavethird"
      @click="gobuythird">
      <img :src="listpicture[2]" class="image">
      <div style="padding: 14px;">
        <div class="mytitlediv">
          <span>{{topsellinglist[2].title}}</span>
        </div>
        <div>
          <span class="mypriceshow">仅售{{topsellinglist[2].price}}￥</span>
        </div>
        <div class="myowndiv"></div>
        <div>
          <span class="mybuyshow" :style="mybuyshowchange2">立即抢购</span>
        </div>
        <div class="myowndiv2"></div>
      </div>
      </div>
    </el-card>
  </el-col>
    <el-col :span="6" 
  :offset="1" class="myTScol" >
    <el-card :body-style="{ padding: '0px' }">
      <div @mouseover="colmouseoverfourth" @mouseleave="colmouseleavefourth"
      @click="gobuyfourth">
      <img :src="listpicture[3]" class="image">
      <div style="padding: 14px;">
        <div class="mytitlediv">
          <span>{{topsellinglist[3].title}}</span>
        </div>
        <div>
          <span class="mypriceshow">仅售{{topsellinglist[3].price}}￥</span>
        </div>
        <div class="myowndiv"></div>
        <div>
          <span class="mybuyshow" :style="mybuyshowchange3">立即抢购</span>
        </div>
        <div class="myowndiv2"></div>
      </div>
      </div>
    </el-card>
  </el-col>
</el-row>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'XiaoTopSelling',
    data(){
        return{
            topsellinglist:{
            },
            currentDate: new Date(),
            listpicture:[],
            becheckedstyle:{
                backgroundColor:'rgb(241, 41, 41)',
                color:'rgb(255, 255, 255)',
                border: 'solid 0px ',
            },
            mybuyshowchange1:'',
            mybuyshowchange2:'',
            mybuyshowchange3:'',
            mybuyshowchange0:'',
            axiosOK:0,
        }
    },
    mounted(){
        this.$addr.get(`products/hot_list`).then(
            response=>{
                console.log('请求获取热销商品成功了',response)
                this.axiosOK=1
                this.topsellinglist=response.data.data
                for( let i=0; i<response.data.data.length; i++){
                  this.listpicture[i]=require(`../../assets/${response.data.data[i].image.slice(13)}1_big.jpg`)
                }
            },
            error=>{
                console.log('请求获取热销商品失败了',error.message)
            })
    },
    methods:{
        colmouseoverfirst(){
          this.mybuyshowchange0=this.becheckedstyle
        },
        colmouseleavefirst(){
          this.mybuyshowchange0=''
        },
        colmouseoversecond(){
          this.mybuyshowchange1=this.becheckedstyle
        },
        colmouseleavesecond(){
          this.mybuyshowchange1=''
        },
        colmouseoverthird(){
          this.mybuyshowchange2=this.becheckedstyle
        },
        colmouseleavethird(){
          this.mybuyshowchange2=''
        },
        colmouseoverfourth(){
          this.mybuyshowchange3=this.becheckedstyle
        },
        colmouseleavefourth(){
          this.mybuyshowchange3=''
        },
        gobuyfirst(){
          this.$router.push({
            name:'xProductDetails',
            params:{id:this.topsellinglist[0].id}})
        },
        gobuysecond(){
          this.$router.push({
            name:'xProductDetails',
            params:{id:this.topsellinglist[1].id}})
        },
        gobuythird(){
          this.$router.push({
            name:'xProductDetails',
            params:{id:this.topsellinglist[2].id}})
        },
        gobuyfourth(){
          this.$router.push({
            name:'xProductDetails',
            params:{id:this.topsellinglist[3].id}})
        },
    },
}
</script>

<style scoped>
.mydiv1{
  margin-top: 20px;
  margin-right: 120px;
  margin-left: 120px;
  margin-bottom: 50px;
}
.myTStitletext{
    font-size: 40px;
    margin-top: -5px;
    margin-bottom: 20px;
}
.myTSrow{
    height: 100%;
    width: 92%;
    margin: 0 auto;
}
.myTScol{
    height: 100%;
    text-align: center;
}
.myTScol :hover{
  cursor: pointer;
  
}
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .image {
    width: 92%;
    /* width: 220px; */
  }
.mytitlediv{
  overflow: hidden;
  height: 45px;
}
  .mypriceshow{
    position: relative;
    color: rgb(214, 41, 41);

  }
  .mybuyshow{
    position:relative;
    padding: 10px;
    height: 60px;
    width: 40px;
    color: rgb(214, 41, 41);
    border: solid 2px rgb(214, 41, 41);
    border-radius: 10px;
  }
  .myowndiv{
    height: 15px;
    width: 100%;
  }
  .myowndiv2{
    height: 7px;
    width: 100%;
  }
</style>